<template>
  <div class="content_box">
    <img class="logo" src="/static/images/avter.jpg" alt="">
    <div class="nr">
      <div class="input">
        <img class="left_icon" src="/static/images/user.png" alt="">
        <input v-model.trim="loginForm.user" type="number" placeholder="请输入手机号" placeholder-style="color:#aaa;">
      </div>
      <div class="input">
        <img class="left_icon" src="/static/images/pass.png" alt="">
        <input v-model.trim="loginForm.pass" type="password" placeholder="请输入验证码" placeholder-style="color:#aaa;">
        <p class="right eye">
          <van-button 
            @click="getCode"
            :disabled="codeLoading"
            type="primary"
            color="#3d98f7"
            custom-style="border:1px solid #f8cf39;padding:0 20rpx;height: 60rpx;line-height: 60rpx;background: none;border-radius: 10rpx;text-align: center;color: #f8cf39;font-size: 28rpx;"
          >{{codeLoading?codeNum+'s 重新获取':'获取验证码'}}</van-button>
        </p>
      </div>
      <div class="input">
        <img class="left_icon" src="/static/images/user.png" alt="">
        <input v-model.trim="loginForm.user" type="number" placeholder="请输入密码" placeholder-style="color:#aaa;">
      </div>
      <div class="input">
        <img class="left_icon" src="/static/images/user.png" alt="">
        <input v-model.trim="loginForm.user" type="number" placeholder="请确认密码" placeholder-style="color:#aaa;">
      </div>
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        loading-text="提交中..."
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >提交</van-button>
    </div>
  </div>
</template>
 
<script>
export default {
  components: {
  },
  data() {
    return{
      loading:false,
      loginForm:{
        user:'',
        pass:''
      },
      codeLoading:false,
      codeNum:60
    }
  },
  onShow() {},
  methods: {
   
    // 获取验证码
    getCode(){
      if(this.codeLoading){
        return
      }
      this.codeLoading = true
      let int = setInterval(() => {
        this.codeNum--
        if(this.codeNum == 0){
          clearInterval(int)
          this.codeNum = 60
          this.codeLoading = false
        }
      }, 1000);
    },

    // 登录
    submit(){
      if(!this.loginForm.user){
        this.$toast('请输入用户名')
        return
      }
      if(!this.loginForm.pass){
        this.$toast('请输入密码')
        return
      }
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 2000);
    }
  },
  onHide() {},
  onLoad() {
    
  },
  onUnload() {
  },
  created() {}
};
</script>

<style lang="scss" scoped>

.content_box{
  .logo{
    display: block;
    width: 120rpx;
    height: 120rpx;
    border-radius: 20rpx;
    margin:100rpx auto 100rpx auto;
  }
  .nr{
    width: 86%;
    margin:0 auto;
    
    .input{
      height: 100rpx;
      border-bottom:1px solid #f5f5f5;
      display: flex;
      align-items: center;
      margin-bottom:10rpx;
      .left_icon{
        width: 34rpx;
        height: 34rpx;
        margin-right:20rpx;
      }
      .right{
        margin-left: auto;
      }
      input{
        font-size:30rpx;
        color:#222;
      }
      .close{
        width: 30rpx;
        height: 30rpx;
        background: #ccc;
        border-radius: 50%;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:18rpx;
      }
      .eye{
        img{
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
    .wj_pass{
      font-size:28rpx;
      text-align: right;
      margin:20rpx 0 30rpx 0;
      color:#666;
    }
  }
  .kj{
    text-align: center;
    margin-top:100rpx;
    img{
      width: 60rpx;
      height: 60rpx;
    }
  }
}
</style>
